<index-title
  [titles]="section.title"
  [more]="section.ranking.category ? '/list/category/' + section.ranking.category : '/list/ranking/ranking'"
></index-title>
<div class="list">
  <section
    class="cursor"
    *ngFor="let soft of softs$ | async; index as index"
    [class.hover]="controlRef.show"
    [routerLink]="['app', soft.name]"
  >
    <header>
      <img class="icon" dstoreCover="icon" [src]="soft.info.icon" dstoreCover="icon" />
    </header>
    <main>
      <span class="number">{{ index + 1 }}.</span>
      <div class="info">
        <span class="name">{{ soft.info.name }}</span>
        <span class="subtitle" [routerLink]="['/list', 'category', soft.info.category]">
          {{ soft.info.category | categoryText | async }}
        </span>
      </div>
      <div class="control">
        <dstore-control #controlRef [soft]="soft"></dstore-control>
      </div>
    </main>
  </section>
</div>
